<template>
	<view class="container">
		<view class="textBox">
			<view class="t1">那么小作家</view>
			<view class="t1">这一天的心情是怎样的呢</view>
		</view>
		<view class="imgBox">
			<image :src="selectedMood"></image>
		</view>
		<view class="choiceBox">
			<view class="row" v-for="(moods, rowIndex) in moodGroups" :key="rowIndex">
			    <view
			        v-for="(mood, colIndex) in moods"
			        :key="colIndex"
			        class="choice"
			        :style="{ backgroundColor: moodMap[mood] === selectedMood ? 'white' : 'unset' }"
			        @click="selectMood(mood)">
			          {{ mood }}
				</view>
			</view>
		</view>
		<button class="btn" @click="toThing">我的心情是这样</button>
	</view>
</template>

<script setup lang="ts">
	import {ref} from 'vue'
	const moodList = ref([
		'../../static/mood1.gif',
		'../../static/mood3.gif',
		'../../static/mood5.gif',
		'../../static/mood6.gif',
		'../../static/mood8.gif',
		'../../static/mood9.gif',
		'../../static/mood11.gif',
		'../../static/mood12.gif',
		'../../static/mood13.gif'
	])
	const moodGroups = ref([
	        ['开心', '得意', '尴尬'],
	        ['暖心', '充实', '无语'],
	        ['吃惊', '愤怒', '难过']
	      ])
	const moodMap = {
		'开心': moodList.value[0],
		'得意': moodList.value[1],
		'尴尬': moodList.value[2],
		'暖心': moodList.value[3],
		'充实': moodList.value[4],
		'无语': moodList.value[5],
		'吃惊': moodList.value[6],
		'愤怒': moodList.value[7],
		'难过': moodList.value[8]
	};
	 
	const selectedMood = ref(moodList.value[0]); // 初始选中第一个图片
	const myMood = ref('开心');
	const selectMood = (mood: string) => {

		myMood.value = mood;
		selectedMood.value = moodMap[mood]; // 根据心情文字获取图片路径
	};
	const toThing = () =>{
		uni.navigateTo({
			url:"/pages/happenThing/happenThing?mood=" + myMood.value
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		background-color:#fff2bd;
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		.textBox{
			margin-top: 150rpx;
			.t1{
				font-size: 32rpx;
				// color: #85784b;
				font-style: italic;
				margin-left: 50rpx;
			}
		}
		.imgBox{
			width: 100%;
			display: flex;
			justify-content: center;
			image{
				width: 300rpx;
				height: 300rpx;
			}
		}
		.choiceBox{
			.row{
				display: flex;
				justify-content: space-around;
				margin-bottom: 15rpx;
				view{
					display: flex;
					justify-content: center;
					align-items: center;
					// background-color: white;
					width: 200rpx;
					border-radius: 10rpx;
					height: 70rpx;
					border: #fff 2px solid;
					font-size: 25rpx;
					color: #85784b;
				}
			}
		}
		.btn{
			background-color: #fcde63;
			border-radius: 30rpx;
			width: 400rpx;
			color: white;
			font-weight: 700;
			margin-top: 200rpx;
		}
	}          
</style>
